<script setup>
import {inject} from "vue";

const isMiniProgram = inject('isMiniProgram');


const booksData = [
  {
    photo: "https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg",
    name: "异星探险家",
    description: "描述一个宇航员在外太空探险的故事。",
    releaseDate: {year: 2023, month: 5, day: 15},
    genre: "科幻",
    online: true,
    viewers: 1024
  },
  {
    photo: "https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg",
    name: "失落的国度",
    description: "描绘一段在未知大陆探险的历险记。",
    releaseDate: {year: 2023, month: 7, day: 20},
    genre: "冒险",
    online: false,
    viewers: 789
  },
  {
    photo: "https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg",
    name: "神秘的古代文明",
    description: "揭示一个关于失落文明和古代遗迹的探索之旅。",
    releaseDate: {year: 2023, month: 6, day: 10},
    genre: "历史",
    online: true,
    viewers: 567
  },
  {
    photo: "https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg",
    name: "数字之城",
    description: "讲述在一个由人工智能主宰的未来城市中的生活。",
    releaseDate: {year: 2023, month: 8, day: 5},
    genre: "科幻",
    online: true,
    viewers: 890
  },
  {
    photo: "https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg",
    name: "魔法学院",
    description: "一位普通少年在魔法学院中探索魔法秘密的故事。",
    releaseDate: {year: 2023, month: 4, day: 18},
    genre: "奇幻",
    online: true,
    viewers: 1234
  },
  {
    photo: "https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg",
    name: "未来世界",
    description: "描述一个由技术和创新主导的未来世界的景象。",
    releaseDate: {year: 2023, month: 9, day: 12},
    genre: "科幻",
    online: true,
    viewers: 456
  },
  {
    photo: "https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg",
    name: "幽灵船长",
    description: "讲述一位传奇海盗船长的冒险故事。",
    releaseDate: {year: 2023, month: 7, day: 1},
    genre: "冒险",
    online: true,
    viewers: 987
  },
  {
    photo: "https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg",
    name: "魔法禁书园",
    description: "一本关于禁忌魔法书籍的力量和危险的神秘故事。",
    releaseDate: {year: 2023, month: 8, day: 28},
    genre: "奇幻",
    online: false,
    viewers: 654
  },
  {
    photo: "https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg",
    name: "机械帝国",
    description: "描绘一个由机械工程师和科技先锋构建的机械帝国的兴衰史。",
    releaseDate: {year: 2023, month: 6, day: 25},
    genre: "科幻",
    online: true,
    viewers: 789
  },
  {
    photo: "https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg",
    name: "龙之谜",
    description: "探索一个神秘的龙族文明以及它们与人类的互动关系的奇幻故事。",
    releaseDate: {year: 2023, month: 5, day: 3},
    genre: "奇幻",
    online: true,
    viewers: 567
  }
];

const leftClick = () => {
  uni.navigateBack()
}

</script>
<template>
  <fui-nav-bar :custom="true" :isFixed="true" :isOccupy="true" background="#f8f8f8">
    <view class="nav-top-box">
      <fui-icon :size="48" name="arrowleft" @click="leftClick"></fui-icon>
      <view style="width: 128rpx;">今日听书</view>
      <view :style="{ marginRight: isMiniProgram ? '176rpx' : '0' }" class="lable-box">
        <div class="top-img">
          <image class="image-top" src="/static/index/top-lable.svg"/>
        </div>
        <text>我的课程</text>
      </view>
    </view>
  </fui-nav-bar>
  <view class="book-today">
    <view class="sreach-box">
      <fui-icon :size="30" color="#999999" name="search"></fui-icon>
      <text>请输入需要搜索的课程</text>
    </view>
    <view v-for="(book, index) in booksData" :key="index" class="book-list">
      <image :src="book.photo" class="book-image"/>
      <view class="book-list-content">
        <view class="content-title">{{ book.name }}</view>
        <view class="content-description">{{ book.description }}</view>
        <view v-if="book.online === true" class="content-online">{{ book.viewers }}次学习 / 免费试听</view>
        <view v-if="book.online === false" class="content-onlines">
          <view class="onlines-time">{{ book.releaseDate.month }}月{{ book.releaseDate.day }}日 上架</view>
          <view class="onlines-text">上架提醒</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.nav-top-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .lable-box {
    width: 212rpx;
    height: 84rpx;
    background: #FFFFFF;
    border-radius: 200rpx;
    display: flex;
    align-items: center;

    .top-img {
      margin: 0 10rpx 0 35rpx;

      .image-top {
        width: 36rpx;
        height: 36rpx;
      }
    }

    text {
      font-size: 28rpx;
      color: #666666;
    }
  }
}

.book-today {
  padding: 20rpx;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .sreach-box {
    width: 670rpx;
    height: 84rpx;
    background-color: #FFFFFF;
    border-radius: 200rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;

    text {
      width: 80%;
      font-size: 28rpx;
      color: #999999;
    }
  }

  .book-list {
    margin: 20rpx;
    width: 670rpx;
    height: 266.66rpx;

    display: flex;
    align-items: center;
    justify-content: space-between;

    .book-image {
      width: 200rpx;
      height: 100%;
      border-radius: 24rpx;
    }

    .book-list-content {
      width: 450rpx;
      height: 100%;
      display: flex;
      justify-content: space-around;
      flex-direction: column;

      .content-title {
        font-size: 28rpx;
        color: #424242;
        font-weight: 600;
      }

      .content-description {
        font-size: 24rpx;
        font-weight: 400;
        color: #999999;
      }

      .content-online {
        font-weight: 600;
        font-size: 24rpx;
        color: #F6701C;
      }

      .content-onlines {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .onlines-time {
          font-size: 24rpx;
          font-weight: 400;
          color: rgb(153, 153, 153);
        }

        .onlines-text {
          width: 144rpx;
          height: 58rpx;
          background: rgba(246, 112, 28, 0.1);
          color: rgb(246, 112, 28);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24rpx;
          font-weight: 600;
          border-radius: 200rpx;
        }
      }
    }
  }
}
</style>